<template>
  <div class="statistics-data" style="border-style:groove ;" >
    <div style="font-size: 18px; font-weight: bold; color: #333; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 5px; padding: 10px; text-align: center;">
      C#统计数据
    </div>
      <el-form :model="formData" :rules="rules" label-width="40%" ref="formRef"  >
      <el-form-item label="载气总量 (g)">
        <el-input v-model="formData.carrierTotal" readonly disabled />
      </el-form-item>
      <el-form-item label="氢气总量 (g)">
        <el-input v-model="formData.hydrogenTotal" readonly disabled />
      </el-form-item>
        <el-form-item label="碳源总量 (g)">
          <el-input v-model="formData.carbonsTotal" readonly disabled/>
      </el-form-item>
      <el-form-item label="用水总量 (g)" prop="waterTotal">
        <el-input v-model="formData.waterTotal" type="number"/>
      </el-form-item>
        <el-form-item label="碳管总量 (g)" prop="carbonnTotal">
          <el-input v-model="formData.carbonnTotal" type="number"  @input="updateCarbonUAndMagnification"/>
      </el-form-item>
      <el-form-item label="碳源利用率 (%)">
        <el-input v-model="formData.carbonU" readonly disabled/>
      </el-form-item>
      <el-form-item label="倍率">
        <el-input v-model="formData.magnification" readonly disabled/>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import emitter from "@/utils/eventBus.ts";
import {defineComponent, ref} from 'vue';
import type {FormInstance, FormRules} from 'element-plus';

export default defineComponent({
  setup() {
    const { proxy }: any = getCurrentInstance();

    const formData = ref({
      hydrogenTotal: 0,
      carbonsTotal: 0,
      carrierTotal: 0,
      waterTotal: 0,
      carbonnTotal: 0,
      carbonU: 0,
      magnification: 0,
    });

    const rules: FormRules = {

      waterTotal: [
        { required: true, message: '用水总量不能为空', trigger: 'blur' },
      ],
      carbonnTotal: [
        {required: true, message: '碳源总量不能为空', trigger: 'blur'},
      ],
    };
    // 计算碳源利用率的函数
    function calculateCarbonU(carbonnTotal, carbonsTotal) {
      // 根据实际逻辑计算碳源利用率
      return ((carbonnTotal / carbonsTotal) * 7 / 6 * 100).toFixed(2)
    }

    // 计算倍率的函数
    function calculateMagnification(carbonnTotal, experimentInfoDataCline) {
      // 根据实际逻辑计算倍率
      return (carbonnTotal / experimentInfoDataCline.catalystIr).toFixed(2);
    }

    // 更新碳源利用率和倍率的函数
    function updateCarbonUAndMagnification() {
      formData.value.carbonU = calculateCarbonU(formData.value.carbonnTotal, formData.value.carbonsTotal);
      formData.value.magnification = calculateMagnification(formData.value.carbonnTotal, experimentInfoDataCline);
    }
    const formRef = ref<FormInstance>();

    let experimentInfoDataCline = ref({})
    onMounted(async () => {
      emitter.on('experimentInfoDataCline', (data) => {
        console.log(`使用模板段回调experimentInfoDataCline:`, data)
        experimentInfoDataCline = data
      })

      emitter.on('setStatisticsDataCline', (data) => {
        console.log('C#统计数据data:', data)
        console.log('C#统计数据experimentInfoDataCline', experimentInfoDataCline)
        if (data) {
          data.carrierTotal = (data.carrierTotal * experimentInfoDataCline.carrierD).toFixed(2);
          data.hydrogenTotal = (data.hydrogenTotal * experimentInfoDataCline.carbonsD).toFixed(2);
          data.carbonsTotal = (data.carbonsTotal * experimentInfoDataCline.hydrogenD).toFixed(2);
        }
        formData.value = data;
      });
      emitter.on('getStatisticsDataCline', () => {
        formRef.value?.validate((valid) => {
          if (valid) {
            emitter.emit('StatisticsTableDataCline', formData.value)
          } else {
            console.log('表单校验不通过');
          }
        });
      });
    });

    // 组件卸载时清理事件监听，防止内存泄漏
    onUnmounted(() => {
      emitter.off('setStatisticsDataCline');
      emitter.off('getStatisticsDataCline');
      emitter.off('experimentInfoDataCline');
    });

    return {
      formData,
      rules,
      formRef,
      updateCarbonUAndMagnification,
    };
  }
})
</script>

<style scoped>
.statistics-data {
  width: 98%;
  height: 36%;
}
.el-form-item {
  margin-bottom: 2px;
}
.el-input {
  width: 79%;
}
.el-date-picker{
  width: 79%;
}
.el-select{
  width: 79%;
}
</style>